<template>
  <div class="main-box">
    <div class="step-box">
      <div class="icon-box">
        <i
          :class="
            bool
              ? 'active iconfont icon-yuanquanxuanzhong'
              : 'iconfont icon-yuanquan'
          "
          :style="{
            '--iconColor': iconColor,
            color: this.bool ? iconColor : 'black',
          }"
          @click="selectItem(id)"
          >&ensp;{{ title }}</i
        >
      </div>
      <div class="head-box" :style="{ 'border-bottom-color': bodyColor }"></div>
      <div class="body-box" :style="{ 'border-color': bodyColor }"></div>
    </div>
    <div class="project-box"></div>
  </div>
</template>

<script>
export default {
  props: {
    id: {
      type: Number,
      default: null,
    },
    iconColor: {
      type: String,
      default: null,
    },
    bodyColor: {
      type: String,
      default: null,
    },
    active: {
      type: Number,
      default: false,
    },
    selectItem: {
      type: Function,
      default: null,
    },
    title: {
      type: String,
      default: null,
    },
  },
  data() {
    return {
      bool: false,
    };
  },
  watch: {
    active(nv, ov) {
      if (this.id === nv) {
        this.bool = true;
      } else {
        this.bool = false;
      }
    },
  },
  methods: {},
};
</script>

<style lang="scss" scoped>
.main-box {
  width: 10%;
  border: 1px solid blue;
  .head-box {
    width: 0;
    height: 0;
    border-bottom: 7px solid #c1d0ff;
    border-right: 7px solid transparent;
    /* border-top: 10px solid transparent; */
    border-left: 7px solid transparent;
    margin-left: 1px;
  }

  .body-box {
    height: 30px;
    width: 0;
    border: 1px solid #c1d0ff;
    margin-left: 7px;
  }

  .icon-box {
    width: 100%;
    .active {
      font-weight: bold;
      color: var(iconColor);
    }
  }
  .icon-box:hover {
    cursor: pointer;
  }
}
</style>